<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>Raster plugin</h1>

<p>This plugin adds several new methods to the <code>joint.dia.Paper</code> object:</p>

<ul>
    <li><b><code>toPNG(callback [, options])</code></b> - Executes the callback function with a PNG data URL representing the content of the paper as the first parameter.</li>
    <li><b><code>toJPEG(callback [, options])</code></b> - Executes the callback function with a JPEG data URL string representing the content of the paper as the first parameter.</li>
    <li><b><code>toDataURL(callback [, options])</code></b> - The general version of two previous methods. Executes the callback function with a data URL string representing the content of the paper in specified MIME type as the first parameter.</li>
</ul>

<p>The available options are:</p>

<ul>
  <li><b><code>width</code></b> - Determine the height of the image in pixels. </li>
  <li><b><code>height</code></b> - Determine the width of the image in pixels. </li>
  <li><b><code>backgroundColor</code></b> - The image background color. </li>
  <li><b><code>padding</code></b> - The space between the image border and the image content.</li>
  <li><b><code>type</code></b> - The standard MIME type for the image format to return (only applies to <code>toDataURL()</code>).</li>
  <li><b><code>quality</code></b> - The quality level of a JPEG image in the range of 0.0 to 1.0 (only applies to <code>toJPEG()</code>).</li>
</ul>

<h2>Install</h2>

<p>Include <code>joint.format.raster.js</code> file into your HTML:</p>
<pre><code>&lt;script type="text/javascript" src="joint.format.raster.js"&gt;&lt;/script&gt;
</code></pre>

<p>As this plugin requires the SVG Export plugin you must also include <code>joint.format.svg.js</code> (If you have doubts, please see SVG Export <a href="../../SVG/docs/index.html">docs</a>).</p>

<p>To get plugin work across all modern browsers include also <a href="https://code.google.com/p/canvg/">canvg</a> library and its dependecies:</p>
<pre><code>&lt;script type="text/javascript" src="lib/rgbcolor.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/StackBlur.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/canvg.js"&gt;&lt;/script&gt;
</code></pre>


<h2>Usage</h2>

<pre><code>
paper.toPNG(function(imageData) { sendToServer(imageData); });

paper.toJPEG(function(imageData) {
  offerForDownload(imageData);
}, {
  width: 640,
  height: 320,
  quality: 0.7
});

</code></pre>

</body>
